<template>
  <div>
    <div class="header">
      <x-header
        class="x-header"
        slot="header"
        :left-options="{backText:'返回'}"
        :title="title"
      >
      </x-header>
    </div>
    <div class="scroll-container scan-container">
      <div class="scan-none-1"></div>
      <div class="scan-box-container">
        <div class="scan-none-2"></div>
        <div class="scan-box">
          <div class="scan-box-area">
            <div class="top-left"></div>
            <div class="top-right"></div>
            <div class="bottom-left"></div>
            <div class="bottom-right"></div>
            <div
              class="light"
              @click="onLightTrigger"
            >
              <i :class="['iconfont',light?'icon-shoudiantong-dakai':'icon-shoudiantong-guanbi']"></i>
              <span>轻触 {{light?'关闭':'打开'}}</span>
            </div>
          </div>
        </div>
        <div class="scan-none-2"></div>
      </div>
      <div class="scan-none-1">
        放入框内，自动扫描
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Scan",
  data() {
    return {
      light: false,
    };
  },
  beforeCreate() {
    //将网页背景设置透明
    document.getElementById("app").style.backgroundColor = "transparent";
    document.querySelector("body").style.backgroundColor = "transparent";
  },
  beforeDestroy() {
    let { QRScanner } = window;
    //恢复之前的背景
    document.getElementById("app").style.backgroundColor = "#f6f6f6";
    document.querySelector("body").style.backgroundColor = "#f6f6f6";
    try {
      QRScanner.hide((status) => {
        console.log("[Scan.vue] 关闭扫描" + JSON.stringify(status));
      });
      QRScanner.destroy(function (status) {
        console.log("[Scan.vue] 销毁扫码" + JSON.stringify(status));
      });
    } catch (e) {
      console.log("[Scan.vue]" + JSON.stringify(e));
    }
  },
  mounted() {
    this.onScan();
  },
  methods: {
    /**
     * 扫码
     */
    onScan() {
      let { QRScanner } = window;
      try {
        QRScanner.show((status) => {
          console.log("[Scan.vue onScan] 显示扫描" + JSON.stringify(status));
        });
        QRScanner.scan((err, contents) => {
          if (err) {
            alert(JSON.stringify(err));
          } else {
            alert("扫描结果: " + contents);
          }
        });
      } catch (e) {
        console.log("[Scan.vue：onScan] " + JSON.stringify(e));
      }
    },

    /**
     * 手电筒开关
     */
    onLightTrigger() {
      let { QRScanner } = window;

      try {
        if (!this.light) {
          QRScanner.enableLight((err, status) => {
            err &&
              console.log(
                "[Scan.vue] 打开手电筒状态错误：" + JSON.stringify(err)
              );
            console.log("[Scan.vue] 打开手电筒状态：" + JSON.stringify(status));
          });
        } else {
          QRScanner.disableLight((err, status) => {
            err &&
              console.log(
                "[Scan.vue] 关闭手电筒状态错误：" + JSON.stringify(err)
              );
            console.log("[Scan.vue] 关闭手电筒状态：" + JSON.stringify(status));
          });
        }
      } catch (e) {
        console.log("[Scan.vue] " + JSON.stringify(e));
        return;
      }
      this.light = !this.light;
    },
  },
};
</script>

<style scoped>
</style>
